<template>
  <div class="raceTeam">
    <el-tabs v-model="activeName" tab-position="right">
      <el-tab-pane name="tab1" label="我的团队">
        <template v-if="isJoinTeam">
          <div class="myteam">
            <n-card class="msg" hoverable>
              <div class="card">
                <div class="top">
                  <div class="name">{{ myTeamMsg.name || "--" }}</div>
                  <n-button class="edit leftbtn" type="success" round size="tiny" strong secondary
                    @click="isShowCreateTeam = true" v-show="myTeamMsg.leader == store.oj.userData.username">
                    <i class="iconfont icon-bianji2"></i>
                  </n-button>
                  <n-button class="edit" type="error" round size="tiny" strong secondary @click="isShowDelTeam = true"
                    v-show="myTeamMsg.leader == store.oj.userData.username">
                    <i class="iconfont icon-shanchu"></i>
                  </n-button>
                </div>
                <div class="bottom">
                  <div class="text">
                    <div>团队领导者</div>
                    <div>{{ myTeamMsg.leader || "--" }}</div>
                  </div>
                  <div class="text">
                    <div>创建时间</div>
                    <div>{{ myTeamMsg.createTime || "--" }}</div>
                  </div>
                  <div class="text">
                    <div>队员数量</div>
                    <div>{{ myTeamMsg.groupUsers.length || 0 }}</div>
                  </div>
                </div>
              </div>
            </n-card>
            <n-card class="users" hoverable>
              <div class="card">
                <div class="cardtitle">队员列表</div>
                <el-table size="small" class="table" :data="myTeamMsg.groupUsers">
                  <el-table-column type="index" label="序号" align="center" width="100%"></el-table-column>
                  <el-table-column prop="username" label="用户名" align="center"></el-table-column>
                  <el-table-column prop="number" label="学号" align="center">
                    <template #default="scoped">{{
                      scoped.row.number || "--"
                    }}</template>
                  </el-table-column>
                  <el-table-column prop="realName" label="真实姓名" align="center">
                    <template #default="scoped">{{
                      scoped.row.realName || "--"
                    }}</template>
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" align="center">
                    <template #default="scoped">{{
                      scoped.row.nickname || "--"
                    }}</template>
                  </el-table-column>
                  <el-table-column label="院校" align="center">
                    <template #default="scoped">
                      {{
                        (scoped.row.school || "") +
                        "-" +
                        (scoped.row.college || "") +
                        "-" +
                        (scoped.row.major || "")
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scoped">
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button size="tiny" type="error" @click="leaderDelUser(scoped.row.uid)" v-show="scoped.row.username != myTeamMsg.leader &&
                            myTeamMsg.leader == store.oj.userData.username
                            ">
                            <i class="iconfont icon-shanchu"></i>
                          </n-button>
                        </template>
                        移出队伍
                      </n-tooltip>
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button size="tiny" type="warning" strong secondary
                            v-show="scoped.row.username == myTeamMsg.leader">
                            <i class="iconfont icon-fenshu"></i>
                          </n-button>
                        </template>
                        队长
                      </n-tooltip>
                      <n-tooltip trigger="hover">
                        <template #trigger>
                          <n-button size="tiny" type="success" strong secondary v-show="scoped.row.username != myTeamMsg.leader &&
                            myTeamMsg.leader != store.oj.userData.username
                            ">
                            <i class="iconfont icon-fenshu"></i>
                          </n-button>
                        </template>
                        队员
                      </n-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </n-card>
          </div>
        </template>
        <template v-else>
          <div class="unShow">
            <n-button size="large" round type="warning" strong secondary class="create" @click="isShowCreateTeam = true">
              <i class="iconfont icon-tianjia2"></i>
              创建队伍
            </n-button>
            <n-button size="large" round type="success" strong secondary class="join" @click="activeName = 'tab2'">
              <i class="iconfont icon-tuanduishezhi"></i>
              加入队伍
            </n-button>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane name="tab2" label="队伍列表">
        <div class="teams">
          <div class="left">
            <el-table class="table" :data="raceTeams.records">
              <el-table-column type="index" label="序号" align="center" width="100%" :index="indexMethod"></el-table-column>
              <el-table-column label="队伍名称" prop="name" align="center"></el-table-column>
              <el-table-column label="创建者" prop="leader" align="center">
                <template #default="scoped">
                  {{ scoped.row.leader || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="队伍人数" prop="count" align="center">
                <template #default="scoped">
                  {{ scoped.row.count || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
              <el-table-column prop="id" label="操作" align="center">
                <template #default="scoped">
                  <div class="btns">
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="btn" type="success" size="tiny" :disabled="isJoinTeam || isJoinTimerReady"
                          @click="userJoinTeam(scoped.row.id)">
                          <i class="iconfont icon-tianjia1"></i>
                          加入队伍
                        </n-button>
                      </template>
                      申请加入队伍
                    </n-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small
                layout="prev, pager, next,sizes" :total="Number(raceTeams.total)"
                v-model:current-page="searchParams.pageNum" v-model:page-size="searchParams.pageSize" />
            </div>
          </div>
          <div class="right">
            <n-button type="warning" round ghost v-show="!isJoinTeam" @click="isShowCreateTeam = true">
              <i class="iconfont icon-tianjia"></i>
              创建队伍
            </n-button>

            <n-button type="warning" round ghost v-show="isJoinTeam" @click="activeName = 'tab1'">
              <i class="iconfont icon-tuanduishezhi"></i>
              我的队伍
            </n-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="tab3" label="邀请我的" v-if="!isJoinTeam">
        <div class="tab3">
          <div class="text">邀请我的</div>
          <el-table class="table" :data="myApplications.records">
            <el-table-column type="index" label="序号" align="center" width="100%" :index="indexMethod"></el-table-column>
            <el-table-column label="比赛ID" prop="cid" align="center"></el-table-column>
            <el-table-column label="队伍ID" prop="cgid" align="center"></el-table-column>
            <el-table-column label="邀请人" prop="username" align="center"></el-table-column>
            <el-table-column label="状态" prop="status" align="center">
              <template #default="scoped">
                <el-tooltip content="已同意" placement="top">
                  <n-button class="btn" size="tiny" type="success" round v-show="scoped.row.status === 1">
                    <i class="iconfont icon-ai53"></i>
                  </n-button>
                </el-tooltip>
                <el-tooltip content="已拒绝" placement="top">
                  <n-button class="btn" size="tiny" type="error" round v-show="scoped.row.status === 2">
                    <i class="iconfont icon-chahao"></i>
                  </n-button>
                </el-tooltip>
                <el-tooltip content="待同意" placement="top">
                  <n-button class="btn" size="tiny" type="warning" round v-show="scoped.row.status === 0">
                    <i class="iconfont icon-dengdaizhong"></i>
                  </n-button>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="createTime" align="center"></el-table-column>
            <el-table-column prop="id" label="操作" align="center">
              <template #default="scoped">
                <div class="btns">
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button class="btn" type="success" size="tiny" :disabled="!isJoinTeam && scoped.row.status != 0"
                        @click="userDealApplications(scoped.row.id, 1)">
                        <i class="iconfont icon-ai53"></i>
                        同意
                      </n-button>
                    </template>
                    同意加入队伍
                  </n-tooltip>
                  &emsp13;
                  <n-tooltip trigger="hover">
                    <template #trigger>
                      <n-button class="btn" type="error" size="tiny" :disabled="!isJoinTeam && scoped.row.status != 0"
                        @click="userDealApplications(scoped.row.id, 2)">
                        <i class="iconfont icon-chahao"></i>
                        拒绝
                      </n-button>
                    </template>
                    拒绝加入队伍
                  </n-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small layout="prev, pager, next,sizes"
              :total="Number(myApplications.total)" v-model:current-page="applicationParams.pageNum"
              v-model:page-size="applicationParams.pageSize" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="tab4" label="入队申请" v-if="myTeamMsg.leader == store.oj.userData.username">
        <div class="tab4">
          <div class="tab4-left">
            <div class="text">入队申请</div>
            <el-table class="table" :data="myInvitations.records">
              <el-table-column type="index" label="序号" align="center" width="100%" :index="indexMethod"></el-table-column>
              <el-table-column label="比赛ID" prop="cid" align="center"></el-table-column>
              <el-table-column label="队伍ID" prop="cgid" align="center"></el-table-column>
              <el-table-column label="申请人" prop="username" align="center"></el-table-column>
              <el-table-column label="状态" prop="status" align="center">
                <template #default="scoped">
                  <el-tooltip content="已同意" placement="top">
                    <n-button class="btn" size="tiny" type="success" round v-show="scoped.row.status === 1">
                      <i class="iconfont icon-ai53"></i>
                    </n-button>
                  </el-tooltip>
                  <el-tooltip content="已拒绝" placement="top">
                    <n-button class="btn" size="tiny" type="error" round v-show="scoped.row.status === 2">
                      <i class="iconfont icon-chahao"></i>
                    </n-button>
                  </el-tooltip>
                  <el-tooltip content="待同意" placement="top">
                    <n-button class="btn" size="tiny" type="warning" round v-show="scoped.row.status === 0">
                      <i class="iconfont icon-dengdaizhong"></i>
                    </n-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="邀请时间" prop="createTime" align="center"></el-table-column>
              <el-table-column prop="id" label="操作" align="center">
                <template #default="scoped">
                  <div class="btns">
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="btn" type="success" size="tiny" :disabled="scoped.row.status != 0"
                          @click="userDealApplications(scoped.row.id, 1)">
                          <i class="iconfont icon-ai53"></i>
                          同意
                        </n-button>
                      </template>
                      同意加入队伍
                    </n-tooltip>
                    &emsp13;
                    <n-tooltip trigger="hover">
                      <template #trigger>
                        <n-button class="btn" type="error" size="tiny" :disabled="scoped.row.status != 0"
                          @click="userDealApplications(scoped.row.id, 2)">
                          <i class="iconfont icon-chahao"></i>
                          拒绝
                        </n-button>
                      </template>
                      拒绝加入队伍
                    </n-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small
                layout="prev, pager, next,sizes" :total="Number(myInvitations.total)"
                v-model:current-page="applicationParams.pageNum" v-model:page-size="applicationParams.pageSize" />
            </div>
          </div>
          <div class="tab4-right">
            <n-button type="success" round v-show="isJoinTeam"
              @click="(userParams.cid = props.cid), (isShowUsers = true)">
              <i class="iconfont icon-tuanduishezhi"></i>
              邀请队友
            </n-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-model="isShowCreateTeam" title="创建团队" width="500">
      <div class="teaminput">
        <span>团队名称：</span><n-input class="input" placeholder="" v-model:value="teamMsg.name"></n-input>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <n-button class="btn" round @click="isShowCreateTeam = false">取消</n-button>
          <n-button class="btn" round type="success" @click="(isShowCreateTeam = false), userCreateTeam()">
            确定
          </n-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="isShowDelTeam" title="系统提示" width="500">
      确定解散该团队？
      <template #footer>
        <div class="dialog-footer">
          <n-button class="btn" round @click="isShowDelTeam = false">取消</n-button>
          <n-button class="btn" round type="success" @click="(isShowDelTeam = false), userDelTeam()">
            确定
          </n-button>
        </div>
      </template>
    </el-dialog>
    <el-drawer v-model="isShowUsers" :show-close="false" direction="rtl" class="drawer" size="50%">
      <template #header="{ close, titleId, titleClass }">
        <h1 :id="titleId" :class="titleClass">用户列表</h1>
        <n-button size="small" round strong secondary type="error" @click="close">
          <i class="iconfont icon-chahao1"></i>
        </n-button>
      </template>
      <el-table class="table" :data="users.records">
        <el-table-column type="index" label="序号" align="center" width="100%"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="number" label="学号" align="center">
          <template #default="scoped">{{ scoped.row.number || "--" }}</template>
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名" align="center">
          <template #default="scoped">{{
            scoped.row.realName || "--"
          }}</template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" align="center">
          <template #default="scoped">{{
            scoped.row.nickname || "--"
          }}</template>
        </el-table-column>
        <el-table-column label="院校" align="center">
          <template #default="scoped">
            {{
              (scoped.row.school || "") +
              "-" +
              (scoped.row.college || "") +
              "-" +
              (scoped.row.major || "")
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scoped">
            <el-tooltip content="邀请该用户" placement="top">
              <n-button size="tiny" type="success" @click="leaderInviteUser(scoped.row.uid)"
                :disabled="isInviteTimerReady">
                <i class="iconfont icon-tijiao1"></i>
              </n-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination class="pagination" :page-sizes="[20, 50, 99]" background small layout="prev, pager, next,sizes"
          :total="Number(users.total)" v-model:current-page="userParams.pageNum"
          v-model:page-size="userParams.pageSize" />
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  leaderDelUserAPI,
  getRaceTeamsAPI,
  getUserTeamAPI,
  userCreateTeamAPI,
  userUpdateTeamAPI,
  userJoinTeamAPI,
  userDelTeamAPI,
  getUserApplicationsAPI,
  userDealApplicationsAPI,
  leaderGetUsersAPI,
  leaderInviteUserAPI,
  getTeamUserCountAPI,
} from "@/api/ojAPI/ojAPI";
import { onMounted, reactive, ref, watch, defineModel } from "vue";
import { ElMessage } from "element-plus";
import useStore from "@/store";
const store = useStore();
onMounted(() => {
  searchParams.cid = props.cid;
  teamMsg.cid = props.cid;
  if (props.raceStatus == -1) {
    Object.assign(applicationParams, {
      pageNum: 1,
      pageSize: 20,
      isManage: false,
      cid: props.cid,
      type: 1,
      status: -1,
      cgid: "",
    });
  }
  getRaceTeams();
  getUserTeam(searchParams.cid);
});
const model = defineModel();
const props = defineProps(["cid", "raceStatus"]);
const searchParams = reactive({
  cid: "",
  pageNum: 1,
  pageSize: 20,
});
const raceTeams = reactive({
  records: [],
  total: 20,
});
const getRaceTeams = async () => {
  await getRaceTeamsAPI(searchParams)
    .then((res) => {
      if (res.data.code === 200) {
        Object.assign(raceTeams, res.data.data);
        const arr = raceTeams.records.map((a) => {
          return a.id;
        });
        getTeamUserCount(arr);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const activeName = ref("tab1");
const indexMethod = (index) => {
  return (searchParams.pageNum - 1) * searchParams.pageSize + index + 1;
};

watch(searchParams, (newV) => {
  getRaceTeams();
});
const myTeamMsg = ref({});
const isJoinTeam = ref(false);
//获取用户队伍信息
const getUserTeam = async (cid) => {
  await getUserTeamAPI(cid)
    .then((res) => {
      if (res.data.code === 200) {
        if (res.data.data != null) {
          isJoinTeam.value = true;
          model.value = true;
          myTeamMsg.value = res.data.data;
          if (
            myTeamMsg.value.leader == store.oj.userData.username &&
            props.raceStatus == -1
          ) {
            Object.assign(applicationParams, {
              pageNum: 1,
              pageSize: 20,
              isManage: true,
              cid: props.cid,
              type: 0,
              status: -1,
              cgid: myTeamMsg.value.id,
            });
          }
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const isShowCreateTeam = ref(false);
const teamMsg = reactive({
  name: "",
  cid: "",
});
//用户创建队伍
const userCreateTeam = async () => {
  if (teamMsg.name.length == 0) {
    ElMessage.error("请输入团队名称");
    return;
  }
  if (myTeamMsg.value.leader) {
    await userUpdateTeamAPI(teamMsg)
      .then((res) => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.msg);
          getUserTeam(searchParams.cid);
          getRaceTeams();
        }
      })
      .catch((err) => {
        console.log(err);
      });
    return;
  }
  await userCreateTeamAPI(teamMsg)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        getUserTeam(searchParams.cid);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const isJoinTimerReady = ref(false);
//用户申请加入队伍
const userJoinTeam = async (cgid) => {
  isJoinTimerReady.value = true;
  setTimeout(() => {
    isJoinTimerReady.value = false;
  }, 10000);
  await userJoinTeamAPI(cgid)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        getUserTeam(searchParams.cid);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
//队长解散队伍
const isShowDelTeam = ref(false);
const userDelTeam = async () => {
  await userDelTeamAPI(myTeamMsg.value.cid)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
        isJoinTeam.value = false;
        model.value = true;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const applicationParams = reactive({
  pageNum: 1,
  pageSize: 20,
  isManage: false,
  cid: "",
  type: -1,
  status: -1,
  cgid: "",
});
watch(applicationParams, (newV) => {
  getUserApplications(newV);
});
const myApplications = ref({
  records: [],
  total: 10,
});
const myInvitations = ref({
  records: [],
  total: 10,
});
//获取用户的邀请
const getUserApplications = async (data) => {
  await getUserApplicationsAPI(data)
    .then((res) => {
      if (res.data.code === 200) {
        if (applicationParams.isManage == false) {
          myApplications.value = res.data.data;
        } else {
          myInvitations.value = res.data.data;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//用户处理邀请
const userDealApplications = async (cgrId, status) => {
  const a = {
    cgrId: cgrId,
    status: status,
  };
  //1通过 2不通过
  await userDealApplicationsAPI(a)
    .then((res) => {
      if (res.data.code === 200) {
        getUserApplications(applicationParams);
        ElMessage.success(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//队长获取用户
const userParams = reactive({
  pageNum: 1,
  pageSize: 20,
  cid: "",
});
watch(userParams, (newV) => {
  leaderGetUsers(newV);
});
const users = ref({
  records: [],
  total: 10,
});
const leaderGetUsers = async (data) => {
  await leaderGetUsersAPI(data)
    .then((res) => {
      if (res.data.code === 200) {
        users.value = res.data.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const isShowUsers = ref(false);

const isInviteTimerReady = ref(false);
//队长邀请用户
const leaderInviteUser = async (uid) => {
  isInviteTimerReady.value = true;
  setTimeout(() => {
    isInviteTimerReady.value = false;
  }, 10000);
  const a = {
    cid: props.cid,
    uid: uid,
  };
  await leaderInviteUserAPI(a)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
//队长移出用户
const leaderDelUser = async (uid) => {
  const a = {
    cid: props.cid,
    uid: uid,
  };
  await leaderDelUserAPI(a)
    .then((res) => {
      if (res.data.code === 200) {
        getUserTeam(searchParams.cid);
        ElMessage.success(res.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取队伍用户数
const getTeamUserCount = async (arr) => {
  await getTeamUserCountAPI(arr)
    .then((res) => {
      if (res.data.code === 200) {
        const obj = JSON.parse(res.data.data);
        raceTeams.records.forEach((ele) => {
          ele.count = obj[ele.id];
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="less" scoped>
.raceTeam {
  width: 100%;
  height: 100%;

  .teams {
    display: flex;

    .left {
      width: 85%;
      padding: 10px;
      margin: 0 auto;
      border-radius: 20px;
      border-right: 3px solid rgb(76, 158, 82);
      border-left: 3px solid rgb(76, 158, 82);

      .table {
        width: 100%;
        height: 300px;
      }

      .footer {
        margin-top: 5px;
        display: flex;
        justify-content: center;
      }
    }

    .right {
      padding: 10px 10px 0 10px;
      width: 10%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }
  }

  .tab3 {
    border: 2px solid rgb(216, 234, 218);
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 10px;

    .text {
      background-color: rgba(76, 158, 82, 0.2);
      border-radius: 10px 10px 0 0;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      padding: 5px 0;
    }

    .table {
      height: 300px;
    }

    .footer {
      margin-top: 5px;
      display: flex;
      justify-content: center;
    }
  }

  .tab4 {
    display: flex;

    .tab4-left {
      width: 85%;
      margin: 0 auto;
      border: 2px solid rgb(216, 234, 218);
      border-radius: 20px;
      overflow: hidden;
      padding-bottom: 10px;

      .text {
        background-color: rgba(76, 158, 82, 0.2);
        border-radius: 10px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        padding: 5px;
      }

      .table {
        height: 300px;
      }

      .footer {
        margin-top: 5px;
        display: flex;
        justify-content: center;
      }
    }

    .tab4-right {
      width: 10%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      padding: 10px 10px 0 10px;
    }
  }

  .myteam {
    display: flex;
    height: 300px;
    user-select: none;
    justify-content: space-around;

    .msg {
      width: 30%;
      height: 300px;
      border-radius: 10px;

      .card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .top {
          background-color: rgba(76, 158, 82, 0.2);
          border-radius: 10px;
          display: flex;
          padding: 2px 0;

          .name {
            padding: 0 8px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: 600;
          }

          .edit {
            margin: auto 5px;
          }

          .leftbtn {
            margin-left: auto;
          }
        }

        .bottom {
          display: flex;
          flex-direction: column;
          margin: auto 0 0 0;

          .text {
            display: flex;
            justify-content: space-between;
            color: #888;
            margin: 5px 0;
          }
        }
      }
    }

    .users {
      width: 65%;
      height: 300px;
      border-radius: 10px;

      .card {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .cardtitle {
          text-align: center;
          background-color: rgba(76, 158, 82, 0.2);
          font-size: 16px;
          font-weight: 550;
          border-radius: 10px 10px 0 0;
        }

        .table {
          width: 100%;
          height: 240px;
          border-radius: 0 0 10px 10px;
          border: 2px solid rgba(76, 158, 82, 0.2);
          border-top-width: 0;
        }
      }
    }
  }

  .unShow {
    height: 300px;
    width: 90%;
    padding: 10px;
    border-radius: 20px;
    border: 3px solid rgb(216, 234, 218);
    background-image: linear-gradient(-20deg,
        rgba(216, 234, 218, 0.5) 50%,
        #eee,
        rgba(233, 160, 23, 0.2) 51%);

    display: flex;

    .create {
      margin: auto auto auto 8%;
      width: 20%;
      height: 50px;
      font-size: 20px;
    }

    .join {
      margin: auto 8% auto auto;
      width: 20%;
      height: 50px;
      font-size: 20px;
    }

    .iconfont {
      font-size: 28px;
    }
  }
}

.teaminput {
  display: flex;

  span {
    height: 30px;
    line-height: 30px;
  }

  .input {
    width: 70%;
  }
}

.dialog-footer {
  display: flex;
  justify-content: right;

  .btn {
    margin: auto 5px;
  }
}

.drawer {
  .table {
    height: 80vh;
  }

  .footer {
    display: flex;
    justify-content: center;
    margin: 5px 0;
  }
}
</style>
